<template>
	<el-dropdown trigger="click" @command="handleClick">
		<span class="el-dropdown-link">
			{{getTitle}}
			<i class="el-icon-arrow-down el-icon--right"></i>
		</span>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item v-for="(item, index) in menuItem"
				:key="index"
				:command="item">
				{{item && item.name}}
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>
<script>
	import Vue from "vue";
	import { DropdownMenu, Dropdown, DropdownItem } from "element-ui";
	Vue.component(DropdownMenu.name, DropdownMenu);
	Vue.component(Dropdown.name, Dropdown);
	Vue.component(DropdownItem.name, DropdownItem);
	export default {
		props: {
			menuItem: {
				type: Array,
				default: () => []
			},
			menuItemClick: {
				type: Function,
				default: () => {}
			},
			defaultItem: {
				type: String,
				default: "下拉菜单"
			}
		},
		data() {
			return {
				title:''//this.defaultItem ? this.defaultItem : ( this.menuItem[0] ? this.menuItem[0].name : this.defaultItem),
			}
		},
		computed: {
			getTitle: {
				get() {
					return this.title
				},
				set(val) {
					this.title = val;
				}
				// return this.menuItem[0] ? this.menuItem[0].name : "下拉菜单";
			},
			localCode(){
				return localStorage.getItem('storeCode')
			}
		},
		watch:{
			defaultItem(newVal,oldVal){
				this.title = newVal
				//this.menuItemClick(this.menuItem[0])
			}
		},
		methods: {
			handleClick(item) {
				//改变title显示
				this.getTitle = item.name;
				this.menuItemClick(item)
			}
		},
		mounted() {
			this.title = this.defaultItem
		},
	}
</script>
<style scoped>
.isAllowClick{
	cursor: not-allowed;
}
</style>

